import { createApp } from 'vue/dist/vue.esm-bundler.js'

/**
 * 计算属性：解决模板中复杂的逻辑运算的问题
 * 计算属性只在内部逻辑依赖的数据发生变化的时候才会被再次调用
 * 计算属性会缓存其依赖的上一次计算出的数据结果
 * 多次复用一个相同的数据，计算属性只调用一次
 */

// const App = {
//   data() {
//     return {
//       studentCount: 1
//     }
//   },
//   /**  
//    * 1. 模板、逻辑、样式尽可能分离
//    * 2. 逻辑运算结果需要复用
//   */
//   template: `
//     <h1>{{ studentCountInfo }}</h1>
//     <h2>{{ studentCountInfo }}</h2>
//     <button @click="addStudentCount">Add Student Count</button>
//   `,
//   computed: {
//     studentCountInfo() {
//       return this.studentCount > 0
//         ? ('学生数：' + this.studentCount)
//         : '暂无学生'
//     }
//   },
//   methods: {
//     addStudentCount() {
//       this.studentCount++
//     }
//   }
// }

const App = {
  data() {
    return {
      a: 1,
      b: 2,
      type: 'plus'
    }
  },
  template: `
    <div>
      <h1>计算属性结果：{{ result }}</h1>
      <h2>方法计算结果：{{ getResult() }}</h2>
      <p>
        <span>{{ a }}  </span>
        <span>{{ sym }}</span>
        <span>{{ b }}</span>
        <span>=</span>
        <span>{{ result }}</span>
        <span>({{ getResult() }})</span>
      </p>
      <div>
        <input v-model="a" />
        <input v-model="b" />
      </div>
      <div>
        <button @click="changeSym('plus')">+</button>
        <button @click="changeSym('minus')">-</button>
        <button @click="changeSym('mul')">*</button>
        <button @click="changeSym('div')">/</button>
      </div>
    </div>
  `,
  computed: {
    // 默认 GETTER 
    sym() {
      switch (this.type) {
        case 'plus':
          return '+'
        case 'minus':
          return '-'
        case 'mul':
          return '*'
        case 'div':
          return '/'
        default:
          break
      }
    },
    result: {
      get() {
        console.log('getter result')

        const a = Number(this.a)
        const b = Number(this.b)

        switch (this.type) {
          case 'plus':
            return a + b
          case 'minus':
            return a - b
          case 'mul':
            return a * b
          case 'div':
            return a / b
          default:
            return ''
        }
      },
      set() {

      }
    },
    calData: {
      get() {
        return {
          a: 'number a:' + this.a,
          b: 'number b:' + this.b,
          type: 'computed type:' + this.type,
          result: 'computed result:' + this.result
        }
      },
      set(newValue) {
        this.a = Number(newValue.a.split(':')[1])
        this.b = Number(newValue.b.split(':')[1])
        this.type = newValue.type.split(':')[1]
      }
    }
  },
  methods: {
    changeSym(type) {
      this.type = type
    },
    getResult() {
      console.log('result result')
      const a = Number(this.a)
      const b = Number(this.b)

      switch (this.type) {
        case 'plus':
          return a + b
        case 'minus':
          return a - b
        case 'mul':
          return a * b
        case 'div':
          return a / b
        default:
          return ''
      }
    }
  }
}

const vm = createApp(App).mount('#app')

vm.calData = {
  a: 'number a: 123',
  b: 'number b: 222',
  type: 'computed type:plus',
}

const test = {
  fn() {

  },
  app: {
    get() {

    },
    set() {

    }
  }
}

console.log(vm)
